import Vue from "vue";

Vue.directive('longpress', {
    bind: function (el, binding, vNode) {

        // 确保提供的表达式是函数
        if (typeof binding.value !== 'function') {
            // 获取组件名称
            const compName = vNode.context.name;
            // 将警告传递给控制台
            let warn = `[longpress:] provided expression '${binding.expression}' is not a function, but has to be `;
            if (compName) {
                warn += `Found in component '${compName}' `
            }

            console.warn(warn);
        }

        // 定义变量
        let pressTimer = null;

        // 定义函数处理程序
        // 创建计时器（ 600ms后执行函数 ）
        let start = (e) => {
            // console.warn("第一次进入")
            if (e.type === 'click' && e.button !== 0) {
                // console.warn("返回了")
                return;
            }

            if (pressTimer === null) {
                // console.warn("定时器之前")
                pressTimer = setTimeout(() => {
                    // 执行函数
                    // console.warn("长按了")
                    handler();
                }, 600)
            }
        }

        // 取消计时器
        let cancel = (e) => {
            // console.warn("跑空了")
            // 检查计时器是否有值
            if (pressTimer !== null) {
                clearTimeout(pressTimer);
                pressTimer = null;
            }
        }

        // 运行函数
        const handler = (e) => {
            // 执行传递给指令的方法
            binding.value(e)
        }

        // 添加事件监听器
        el.addEventListener("mousedown", start);
        el.addEventListener("touchstart", start);


        // 取消计时器
        el.addEventListener("click", cancel);
        el.addEventListener("mouseout", cancel);
        el.addEventListener("touchend", cancel);
        el.addEventListener("touchcancel", cancel);
        el.addEventListener("touchmove", cancel);

    }
})
